<template>

    <div>
        <div id="loading" ref="pagesLoad" v-if="pagesLoad">
            <img src="../assets/aaa.svg"/>
        </div>
        <van-actionsheet v-model="set_user_type.status" :actions="set_user_type.arr" />
        <div class="top-bar">
            <van-nav-bar  :title="top_bar.text" />
        </div>
        <outinline-msg :isshow="outinlineshow"></outinline-msg>
        <van-swipe ref="item_box" class="item_box" :show-indicators="false" :touchable="false">
            <van-swipe-item>
   
                    <div class="converse">
                        <van-search placeholder="搜索关键字" @keydown="asdsadasdasdasd"/>
                        <div class="noUser" v-if="msg_user_list.list.length == 0">
                            <span>海洋里面没有草</span>
                        </div>
                        <div class="list" v-if="msg_user_list.list.length > 0">
                            
                            <div class="item" v-for="(item,index) in msg_user_list.list" :key="index" @click="openUserMsg(index)" :type="item.user_id">
                                <van-cell-swipe :right-width="80">
                                <div class="headpic"><img :src="item.headimgurl"></div>
                                <div class="text">
                                    <!-- <p class="name"><b>{{item.name?item.name:item.nickname}}</b><span v-if="item.new_msg">{{item.new_msg.time | formatDate('hh:mm')}}</span></p> -->
                                    <p class="name"><b>{{item.name?item.name:item.nickname}}</b><span v-if="item.new_msg">{{item.new_msg.time | formatDate('hh:mm')}}</span></p>
                                    <p class="msg">
                                        <span v-if="item.new_msg">{{item.new_msg.content == '【收到不支持的消息类型，暂无法显示】'?'【对方向您发送了一个表情】':item.new_msg.content}}</span>
                                        <b><i class="badge" v-if="item.new_msg_num>0">{{item.new_msg_num>99?'99+':item.new_msg_num}}</i></b>
                                    </p>
                                </div>
                                <span class="delUser" slot="right" @click="delUser(index)">删除</span>
                                </van-cell-swipe>
                            </div>
                        </div>
                    </div>
          
            </van-swipe-item>
            <van-swipe-item>
                    <div class="converse user_list">
                        <div class="list">
                            <div class="item" v-if="item.subscribe" v-for="(item,index) in user_list.list" :key="index" @click="openUserListMsg(index)">
                                <div class="headpic"><img :src="item.headimgurl"></div>
                                <div class="text">
                                    <p class="name">{{item.nickname|limitLength(18)}}
                                        <span class="is_subscribe" :type="item.subscribe" v-if="item.subscribe">(已关注)</span>
                                        <span class="is_subscribe" :type="item.subscribe" v-else>(取消关注)</span>
                                    </p>
                                    <p class="msg">备注：{{item.name}}</p>
                                    <p class="msg">关注时间：{{item.subscribe_time|formatDate}}</p>
                                </div>
                            </div>
                            <div class="item" v-if="!item.subscribe" v-for="(item,index) in user_list.list" :key="index" @click="openUserListMsg(index)">
                                <div class="headpic"><img :src="item.headimgurl"></div>
                                <div class="text">
                                    <p class="name">{{item.nickname|limitLength(18)}}
                                        <span class="is_subscribe" :type="item.subscribe" v-if="item.subscribe">(已关注)</span>
                                        <span class="is_subscribe" :type="item.subscribe" v-else>(取消关注)</span>
                                    </p>
                                    <p class="msg">备注：{{item.name}}</p>
                                    <p class="msg">取关时间：{{item.unsubscribe_time|formatDate}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
            </van-swipe-item> 
            <van-swipe-item class="usercenter">
                <div class="infobox">
                    <div class="top">
                        <div class="headpic">
                            <img :src="cs_user.header_url?URL.server+cs_user.header_url:'http://suo.im/4nci1t'" alt="">
                        </div>
                        <div class="name">
                            <b>昵称：{{cs_user.nickname}}&emsp;账号：{{cs_user.username}}</b><br>
                            <b>分配状态：<b :style="{color:csisLine?'green':'red'}">{{csisLine?'分配会话':'不分配会话'}}</b></b>
                        </div>
                        <div class="status">
                            <span @click="set_user_type.status = true" :type="cs_user.type" v-if="cs_user.type == 1"><van-icon name="checked" />当前在线<van-icon class="right" name="arrow" /></span>
                            <span @click="set_user_type.status = true" :type="cs_user.type" v-else-if="cs_user.type == 2"><van-icon name="more" />当前忙碌<van-icon class="right" name="arrow" /></span>
                            <span @click="set_user_type.status = true" :type="cs_user.type" v-else-if="cs_user.type == 3"><van-icon name="warn" />当前离线<van-icon class="right" name="arrow" /></span>
                        </div>
                    </div>
                    <div class="button">
                        <van-button size="large"  type="primary" @click="setUserType({type:1})">一键重新登录</van-button>
                        <van-button size="large" @click="setOutinlineMsg">设置离线回复</van-button>
                        <van-button size="large" @click="loginOut">切换账号</van-button>
                        <van-button size="large" @click="loginOut">退出登录</van-button>
                    </div>
                </div>

            </van-swipe-item>
        </van-swipe>
        <div class="bottom-bar">
            <van-tabbar v-model="value_index.item_box" @change="jumpItemBox">
                <van-tabbar-item v-for="(item,index) in bottom_bar" :key="index" :info="item.new_msg > 0?(item.new_msg < 100?item.new_msg:'99+'):''">
                    <span class="name">{{item.text}}</span>
                    <template slot="icon" slot-scope="props">
                        <img class="icon" :src="props.active ? item.a_icon : item.icon"/>
                    </template>
                </van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
    import OutinlineMsg from './OutinlineMsg';
    // var createPlayer = require('web-audio-player')
    export default {
        name: "Index",
        data() {
            return {
                csisLine:1,
                pagesLoad:true,
                outinlineshow:false,
                cs_user:{},
                set_user_type:{
                    status:false,
                    arr:[
                        {
                            name:'在线',
                            callback:this.setUserType,
                            type:1
                        },
                        {
                            name:'忙碌',
                            callback:this.setUserType,
                            type:2
                        },
                        {
                            name:'离线',
                            callback:this.setUserType,
                            type:3
                        }
                    ]
                },
                value_index:{
                    item_box:0
                },
                top_bar:{
                    text:'消息'
                },
                msg_user_list:{
                    status:{
                        isLoad:false
                    },
                    list:[]
                },
                user_list:{
                    status:{
                        isLoad:false
                    },
                    list:[]
                },
                bottom_bar:[
                    {
                        text:'消息',
                        icon:require('../assets/tab01.png'),
                        a_icon:require('../assets/tab01_1.png'),
                        new_msg:0
                    },{
                        text:'联系人',
                        icon:require('../assets/tab02.png'),
                        a_icon:require('../assets/tab02_2.png'),
                        new_msg:0
                    },{
                        text:'我的',
                        icon:require('../assets/tab03.png'),
                        a_icon:require('../assets/tab03_3.png'),
                        new_msg:0
                    }
                    
                ]
            };
        },
        components: {
            'outinline-msg': OutinlineMsg
        },
        created: function() {
            window.$vm = window.$vm || {};
            $vm.Index = this;
            $vm.Index.$fn.isLogin((status)=>{
                console.log(status);
                if(status != 1){//当前未登陆
                    console.log(111);
                    this.$router.push({path:'/login'})//跳转到登陆页面
                    return;
                }
                $vm.Index.cs_user = this.$fn.getCookie('user');
                $.get($vm.Index.URL.server+'/index/test/getButtInfo?butt_id='+$vm.Index.cs_user.id,function(res){
                    // $vm.Index.user_list.list = res.msg.reverse();
                    res.msg.sort(function(obj1,obj2){
                        return obj1.subscribe_time - obj2.subscribe_time
                    }).reverse();
                    $vm.Index.user_list.list = res.msg;
                    $vm.Index.msg_user_sort()
                })
                $.get($vm.Index.URL.server+'/api/Customer_service/getConnectLink?cs_id='+$vm.Index.cs_user.id,function(res){
                    if(typeof res == 'string') res = JSON.parse(res); 
                    $vm.Index.csisLine = res.result
                    console.log($vm.Index.csisLine);
                })
                $vm.Index.msg_user_list.list = $vm.Index.$fn.getMsgList($vm.Index.cs_user.id);
                console.log($vm.Index.msg_user_list.list);
                if($vm.Index.msg_user_list.list.length < 15){
                    $.get($vm.Index.URL.server+'/api/User/autoPushMsg',{
                        cs_id:$vm.Index.cs_user.id
                    },function(res){
                        if(typeof res == 'string') res = JSON.parse(res); 
                        if(res.status == 1){
                            res.result.forEach(function(item){
                                item.msg_list = item.chatlog.reverse();
                                var new_msg = {};
                                if(item.chatlog.length > 0){
                                    if(item.chatlog[item.chatlog.length - 1].type != 'text'){
                                        new_msg.content = '【新消息】';
                                    }else{
                                        new_msg.content = item.chatlog[item.chatlog.length - 1].content;
                                    }
                                    new_msg.time = item.chatlog[item.chatlog.length - 1].send_time
                                    item.new_msg = new_msg
                                }
                                $vm.Index.$fn.addMsgList($vm.Index.cs_user.id,item);
                            });
                            $vm.Index.msg_user_list.list = $vm.Index.$fn.getMsgList($vm.Index.cs_user.id);
                            $vm.Index.msg_user_sort()
                        }
                    });
                }
                setTimeout(function(){
                    $vm.Index.msg_user_sort()
                },0);
                $vm.Index.$socket.emit('re_connect', {
                    user:$vm.Index.cs_user,type:$vm.Index.loginType
                });
                $vm.Index.$fn.getPushMsg($vm.Index.cs_user.id,function(data){
                    if(!data){return;}
                    data.reverse();
                    data.forEach(function(item){
                        $vm.Index.user_list.list.forEach(function(user){
                            if(user.openid == item.openid){
                                $vm.Index.sendMsg(item);
                            }
                        });
                    });
                });
            });
        },
        watch: {
            msg_user_list:()=>{
                setTimeout(function(){
                    $vm.Index.msg_user_sort()
                },0);
            },
            "$route":function(data){
                console.log(data);
                if(data.name == "Index"){
                    if(data.query.type && data.query.type == "setOutinlineMsg"){
                        this.outinlineshow = true;
                    }else{
                        this.outinlineshow = false;
                    }
                }
            }
        },
        methods:{
        asdsadasdasdasd:(e)=>{
            console.log(e.keyCode);
        },

            setOutinlineMsg:function(){
                $vm.Index.$router.push({path:'/index?type=setOutinlineMsg'})
                
            },
            loginOut:function(){
                $vm.Index.$fn.setCookie('secret',{})
                $vm.Index.$fn.setCookie('user',{})
                $vm.Index.$router.push({path:'/login'})
            },
            stopdefault:()=>{},
            setUserType:(data)=>{
                $vm.Index.set_user_type.status = false;
                if(data.type == $vm.Index.cs_user.type){
                    return;
                }
                if(data.type == 1){
                    console.log(data);
                    $.get($vm.Index.URL.server+'/api/login/online',{id:$vm.Index.cs_user.id},function(res){
                        console.log(res);
                        if(res.status == 1){
                            $vm.Index.cs_user.type=1;
                            $vm.Index.$fn.setCookie('user',$vm.Index.cs_user);
                            location.reload();
                        }
                    });
                }else if(data.type == 2){
                    $.get($vm.Index.URL.server+'/api/login/busy',{id:$vm.Index.cs_user.id},function(res){
                        if(res.status == 1){
                            $vm.Index.cs_user.type = 2;
                            $vm.Index.$fn.setCookie('user',$vm.Index.cs_user);
                        }
                    });
                }else if(data.type == 3){
                    $.get($vm.Index.URL.server+'/api/login/outline',{id:$vm.Index.cs_user.id},function(res){
                        if(res.status == 1){
                            $vm.Index.cs_user.type = 3;
                            $vm.Index.$fn.setCookie('user',$vm.Index.cs_user);
                        }
                    });
                }
            },
            onChange:(index)=>{//滑块切换触发
                $vm.Index.value_index.item_box = index;
            },
            jumpItemBox:function(index){//点击底部按钮触发
                $vm.Index.value_index.item_box = index;
                $vm.Index.top_bar.text = $vm.Index.bottom_bar[index].text
                $vm.Index.$refs.item_box.swipeTo(index);
            },
            refreshMsgUserList:function(){//消息栏目下拉刷新
                setTimeout(()=>{
                    $vm.Index.msg_user_list.status = false;
                },1000);
            },
            refreshUserList:function(){//联系人栏目下拉刷新
                $.get($vm.Index.URL.server+'/index/test/getButtInfo?butt_id='+$vm.Index.cs_user.id,function(res){
                    $vm.Index.user_list.list = res.msg;
                    $vm.Index.msg_user_sort()
                    $vm.Index.user_list.status = false;
                })
            },
            openUserMsg:function(index){//点击消息列表的用户
                var user = $vm.Index.msg_user_list.list[index]
                $vm.Index.msg_user_list.list[index].new_msg_num = 0;
                $vm.Index.$fn.updataMsgList($vm.Index.cs_user.id,$vm.Index.msg_user_list.list[index].user_id,$vm.Index.msg_user_list.list[index]);
                $vm.Index.$router.push({path:'/msgbox/'+user.user_id})

            },
            openUserListMsg:function(index){//点击联系人列表里面的用户
                console.log($vm.Index.user_list.list[index]);
                $vm.Index.$fn.addMsgList($vm.Index.cs_user.id,$vm.Index.user_list.list[index]);
                $vm.Index.msg_user_list.list = $vm.Index.$fn.getMsgList($vm.Index.cs_user.id);
                // $vm.Index.$fn.setCookie('currentlyMsg',$vm.Index.user_list.list[index].user_id);
                $vm.Index.$router.push({path:'/msgbox/'+$vm.Index.user_list.list[index].user_id})//跳转到聊天页面
            },
            delUser:(index)=>{
                console.log($vm.Index.msg_user_list.list[index].user_id);
                var result = $vm.Index.$fn.delMsgUser($vm.Index.cs_user.id,$vm.Index.msg_user_list.list[index]);
                console.log(result);
                if(result.status == 1){
                    $vm.Index.msg_user_list.list = result.list
                }
            },
            msg_user_sort:()=>{
                $vm.Index.msg_user_list.list.sort(function(obj1,obj2){
                    if(!obj1.new_msg){
                        obj1.new_msg = {time:0}
                    }
                    if(!obj2.new_msg){
                        obj2.new_msg = {time:0}
                    }
                    return obj1.new_msg.time - obj2.new_msg.time
                }).reverse();
            },
            sendMsg:(data)=>{
                console.log(data);
                data.send_state = 1;
                var isInUserList = null,
                    isInMsgUserList = null,
                    isInCurrently = null,
                    userInfo = null;
                
                $vm.Index.user_list.list.some(function(item,index){
                    if(item.openid == data.openid){
                        isInUserList = index
                        return true;
                    }
                    return false;
                })
                
                if(isInUserList != null){
                    userInfo = $vm.Index.user_list.list[isInUserList];
                }
                
                new Promise(function(success,error){
                    if(userInfo == null){
                        $.get($vm.Index.URL.server+'/api/User/getSqlUserInfo',{openid:data.openid},function(res){
                            if(typeof res == 'string') res = JSON.parse(res);
                            userInfo = res.result;
                            $vm.Index.user_list.list.push(userInfo);
                            console.log($vm.Index.user_list.list);
                            $vm.Index.msg_user_sort()
                            success(userInfo);
                        }); 
                    }else{
                        success(userInfo);
                    }
                }).then((userInfo)=>{
                    console.log(userInfo);
                    $vm.Index.msg_user_list.list.some(function(item,index){
                        if(item.openid == data.openid){
                            isInMsgUserList = index
                            return true;
                        }
                        return false;
                    });
                    
                    if(isInMsgUserList == null){
                        $vm.Index.$fn.addMsgList($vm.Index.cs_user.id,userInfo);
                        console.log($vm.Index.$fn.getMsgList($vm.Index.cs_user.id));
                    }
                    console.log($vm.Index.$fn.getMsgList($vm.Index.cs_user.id));
                    var result = $vm.Index.$fn.addUserMsgList($vm.Index.cs_user.id,userInfo.user_id,data);
                    if(result.status == 1){
                        $vm.Index.msg_user_list.list = $vm.Index.$fn.getMsgList($vm.Index.cs_user.id);
                        console.log($vm.Index.msg_user_list.list);
                    }
                    console.log($vm.Index.msg_user_list.list);
                    if(data.type=="subscribe"){
                       $vm.Index.$refs.subscribe.play();
                    }else if(data.type=="unsubscribe"){
                       $vm.Index.$refs.unsubscribe.play();
                    }else{
                        $vm.Index.$refs.newmsg.play();
                    }
                })
            }
        },
        sockets:{
            disConnects:function(){
                window.location.reload();
            },
            re_connect:(data)=>{
                console.log(data);
                if(data.status == 1){
                    $.get($vm.Index.URL.server+'/api/login/online',{id:$vm.Index.cs_user.id},function(res){
                        if(res.status == 1){
                            $vm.Index.cs_user.type = 1;
                            $vm.Index.$fn.setCookie('user',$vm.Index.cs_user);
                        }
                        console.log(111111111);
                        $vm.Index.pagesLoad = false;
                        $vm.Index.$forceUpdate()
                    });
                }
            },
            sendMsg:(data)=>{
                // console.log(data);
                data.send_state = 1;
                var isInUserList = null,
                    isInMsgUserList = null,
                    isInCurrently = null,
                    userInfo = null;
                $vm.Index.user_list.list.some(function(item,index){
                    if(item.openid == data.openid){
                        isInUserList = index
                        return true;
                    }
                    return false;
                })
                
                if(isInUserList != null){
                    userInfo = $vm.Index.user_list.list[isInUserList];
                }
                
                new Promise(function(success,error){
                    if(userInfo == null){
                        $.get($vm.Index.URL.server+'/api/User/getSqlUserInfo',{openid:data.openid},function(res){
                            if(typeof res == 'string') res = JSON.parse(res);
                            userInfo = res.result;
                            $vm.Index.user_list.list.unshift(userInfo);
                            $vm.Index.msg_user_sort()
                            success(userInfo);
                        }); 
                    }else{
                        success(userInfo);
                    }
                }).then((userInfo)=>{
                    $vm.Index.msg_user_list.list.some(function(item,index){
                        if(item.openid == data.openid){
                            isInMsgUserList = index
                            return true;
                        }
                        return false;
                    });
                    
                    if(isInMsgUserList == null){
                        $vm.Index.$fn.addMsgList($vm.Index.cs_user.id,userInfo);
                    }
                    var result = $vm.Index.$fn.addUserMsgList($vm.Index.cs_user.id,userInfo.user_id,data);
                    if(result.status == 1){
                        $vm.Index.msg_user_list.list = $vm.Index.$fn.getMsgList($vm.Index.cs_user.id);
                        setTimeout(function(){
                            $vm.Index.msg_user_sort()
                        },0);
                    }
                    var notification_content = '';
                    console.log(data);
                    if(data.type == 'text'){
                        notification_content += data.content
                    }else if(data.type == 'image'){
                        notification_content += '【新消息：图片】'
                    }else if(data.type == 'voice'){
                        notification_content = '【新消息：语音】'
                    }else if(data.type == 'subscribe'){
                        notification_content += '【新用户关注】'
                    }else if(data.type == 'unsubscribe'){
                        notification_content += '【用户取消关注】'
                    }
                    console.log(notification_content);
                    Notification.requestPermission(function (permission) {  
                        if (permission == "granted") {
                            var notification = new Notification(userInfo.nickname,{  
                                dir: "auto",  
                                renotify: false,
                                lang: "zh-CN",  
                                tag: "testNotice",  
                                icon:require('../assets/tab01.png'),  
                                body: notification_content
                            });   
                        }
                    })
                    if(data.type=="subscribe"){
                        var cut_audio = document.createElement('audio')
                        cut_audio.src = $vm.MsgBox.URL.node+'/index/mp3/1.mp3';
                        cut_audio.play();
                    }else if(data.type=="unsubscribe"){
                        var cut_audio = document.createElement('audio')
                        cut_audio.src =  $vm.MsgBox.URL.node+'/index/mp3/3.mp3';
                        cut_audio.play();
                    }else{
                        var cut_audio = document.createElement('audio')
                        cut_audio.src =  $vm.MsgBox.URL.node+'/index/mp3/2.mp3';
                        cut_audio.play();
                    }

                    // var audio;
                    // if(data.type=="subscribe"){
                    //     audio = createPlayer(require('../assets/1.mp3'))
                    // }else if(data.type=="unsubscribe"){
                    //     audio = createPlayer(require('../assets/3.mp3'))
                    // }else{
                    //     audio = createPlayer(require('../assets/2.mp3'))
                    // }
                    // audio.on('load', () => {
                    //     console.log('Audio loaded...')
                    //     audio.play()
                    //     audio.node.connect(audio.context.destination)
                    // })
                })
            }
        }
    };
</script>

<style lang="less">
    *{font-family: 微软雅黑;}
    #loading{
        position: fixed;top:0;left:0;background:rgba(0,0,0,0.5);z-index: 99999;width:100%;height:100%;display:flex;
        transition: all 0.3s;opacity: 1;
        img{
            width:100px;height:100px;display:block;margin:auto;
        }
    }
    .top-bar{
        height:44px;text-align: center;font-size: 18px;line-height: 44px;background:#ffffff;
        border-bottom: 1px solid #d8d8d8;letter-spacing: 3px;margin-top: 40px;
    }
    .item_box{
        height:calc(100vh - 135px);background:#fff;
        .converse{
            height:calc(100vh - 135px);overflow: hidden;overflow-y: auto;position:relative;
            .noUser{
                position: absolute; width:100%;height:calc(100% - 56px);top:56px;display:flex;
                span{
                    display:inline-block;margin:auto;font-size:16px;color:#999;
                }
            }
            .van-search{
                background:#fff!important;padding:10px 15px;font-size: 18px;
                .van-icon-search{
                    left:25px;margin-top: 1px;font-size: 18px;
                }
                .van-cell{
                    background:#f4f4f4;padding: 3px 10px 3px 35px;border-radius:10px;
                    input{
                        background:none;height:30px;font-size: 16px;
                    }
                    input::-webkit-input-placeholder{
                        color:#8c8c8c;
                    }
                }
            }
            .list{
                .item{
                    height:68px;border-bottom: 1px solid #f1f1f1;
                    p{margin:0;}
                    .headpic{
                        width: 50px;height:50px;background:#fff;padding:9px 10px 10px 12px;float:left;
                        img{
                            width:100%;height:100%;border-radius: 50px;
                        }
                    }
                    .text{
                        width:calc(100% - 72px);float:left;
                        .name{
                            padding-top: 11px;font-size: 0;line-height: 16px;
                            b{
                                color:#212121;display: inline-block;font-size: 16px;line-height: 16px;
                                width:calc(100% - 50px);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
                            }
                            span{
                                font-size: 14px;color:#7f7f7f;line-height: 16px;vertical-align: top;
                                display: inline-block;width:50px;text-align: center;line-height: 16px;
                            }
                        }
                        .msg{
                            padding-top: 5px;font-size: 0;line-height: 16px;
                            span{
                                font-size: 14px;color:#a2a2a2;display: inline-block;
                                width:calc(100% - 50px);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
                            }
                            b{
                                display: inline-block;width:50px;text-align: center;vertical-align: top;
                                i{
                                    display: inline-block;text-align: center;line-height: 16px;
                                    font-size: 12px;height:16px;min-width: 16px;font-weight: 400;
                                    background:red;padding:1px;border-radius: 50px;color:#fff;font-style:normal;
                                }
                            }
                        }
                    }
                    .delUser{
                        display: inline-block;background:red;color:#fff;width:80px;height:69px;text-align: center;line-height: 69px;
                    }
                }
                .item:active{
                    background:#eee;
                    .headpic{
                        background:#eee;
                    }
                }
            }
        }
        .infobox{
            position: absolute;top:0;bottom:0px;overflow: hidden;overflow-y: auto;padding-bottom: 10px;
        }
        .user_list{
            .item{
                height:88px!important;
                .headpic{
                    padding:19px 10px 20px 12px!important; 
                }
            }
            .list .item .text .name{
                font-size: 16px;font-weight: 600;line-height: 16px;padding-top: 16px;color:#666;
                .is_subscribe{
                    display: inline-block;width:auto;
                    &[type="1"]{
                        color:#07e118;
                    }
                    &[type="0"]{
                        color:red;
                    }
                }
            }
            .list .item .text .msg{
                font-size: 12px;line-height: 20px;color:#a2a2a2;
            }
        }
        .usercenter{
            background:#f2f2f2;
            .top{
                width:100%;height:auto;background:#fff;padding:30px 0;
                .headpic{
                    width:60px;height:60px;margin:0 auto 0;
                    img{
                        width:100%;height:100%;border-radius: 50px;
                    }
                }
                .name{
                    font-size: 16px;text-align: center;margin-top:5px;
                    b{
                        font-weight: 400;font-size: 14px;color:#999;
                    }
                }
                .status{
                    text-align: center;font-size: 14px;color:#a4a4a4;margin-top:5px;
                    span{
                        i{
                            position: relative;top:2px;padding:0 5px;
                        }
                        &[type="1"]{
                            i{
                                color:#07e118;
                            }
                            .right{
                                color:#a4a4a4;
                            }
                            
                        }
                        &[type="2"]{
                            i{
                                color:#fae900;
                            }
                            .right{
                                color:#a4a4a4;
                            }
                            
                        }
                        &[type="3"]{
                            i{
                                color:#ff1c1c;
                            }
                            .right{
                                color:#a4a4a4;
                            }
                            
                        }
                        .right{
                            font-size: 12px;top:1px;
                        }
                    }
                }
            }
            .button{
                padding:0 15px;
                button{
                    margin:15px 0 0;
                }
                
            }
        }
    }
    .bottom-bar{
        background:#ffffff;height:49px;border-top: 1px solid #e6e6e6;
        .icon{
            width:25px;height:25px;position: relative;top:3px;
        }
        .name{
            position: relative;top:-2px;
        }
        .van-icon__info{
            top:0;
        }
    }
</style>
